<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>国美TRP投放代码说明及测试页面</title>
        <link href="resource/bootstrap.min.css" rel="stylesheet">
        <script src="resource/jquery.min.js"></script>
        <script src="resource/bootstrap.min.js"></script>
        
        <link href="resource/codemirror/codemirror.css" rel="stylesheet" />
        <link href="resource/codemirror/monokai.css" rel="stylesheet"/>
        <script src="resource/codemirror/codemirror.js"></script>
        <script src="resource/codemirror/javascript.js"></script>
    </head>
    <body>
    <!-- Static navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="javascript:;">国美TRP投放代码说明及测试页面</a>
        </div>
      </div>
    </div>
    <div class="container">
    	<div class="jumbotron">
        <h2><a href="/static/trp/template/adserving_api.html" target="_blank"><span class="glyphicon glyphicon-question-sign" style="vertical-align:middle;"></span>&nbsp;投放代码说明</a></h2>
      </div>
      <div class="jumbotron">
        <h2>嵌入代码投放</h2>
        
        <textarea id="trpcode" name="trpcode">// 请在此粘贴从trp系统获取的投放代码，然后点击【确认投放】
</textarea>
        <!--<textarea id="trpcode" name="trpcode">
        	<iframe width="256" height="256" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" allowtransparency="true" src="semiad_iframe.html?_srv=GOME&amp;l=103&amp;k1=关键字1&amp;k2=关键字2&amp;k3=关键字3&amp;src=http://d189.mzhen.cn/static/trp/images/logo.jpg&amp;ldp=http://www.semidata.com&amp;w=256&amp;h=256&amp;timeout=1000&amp;max=3&amp;showtype=1&amp;time=2000&amp;arraytype=0&amp;code=2000"></iframe>
        </textarea>-->
        <!--<textarea id="trpcode" name="trpcode">
			<script type="text/javascript">
			(function (doc) {
			    var js = doc.createElement("script"),
				fs = doc.getElementsByTagName("script")[0];
			    js.charset = "utf-8";
			    js.src = "semi_ad_serving.js";
			    fs.parentNode.insertBefore(js, fs);
			})(document);
			</script>
			
			<div id="GOME_1"></div>
			<script type="text/javascript">
			(function(win) {
				var params = {};
			    params["_srv"] = "GOME";
			    params["_id"] = "GOME_1";
			    
			    params["l"] = '103';
			    params["w"] = '256';
			    params["h"] = '256';
			    
			    params["k1"] = '关键字1';
			    params["k2"] = '关键字2';
			    params["k3"] = '关键字3';
			    
			    params["max"] = 3;
			    params["showtype"] = 1;
			    params["time"] = 2000;
			    params["arraytype"] = 0;
			    params["code"] = '<img material="true" ><img material="true" ><img material="true" >';
			    
			    params["user"] = '';
			    params["ip"] = '';
			    
			    params["src"] = 'http://d189.mzhen.cn/static/trp/images/logo.jpg';
			    params["ldp"] = 'http://www.semidata.com';
			    params["timeout"] = 1000;
	
			    __semi_rpq = win.__semi_rpq || [];
			    __semi_rpq.push(params);
			})(window);
			</script>
        </textarea>-->
		<button type="submit" class="btn btn-primary pull-right viewFormCode" style="margin:5px 0;">确认投放</button>
		
      </div>
      <div class="jumbotron">
        <h2>自定义投放</h2>
        
        <form class="form-horizontal" role="form" onsubmit="return false;">
		  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">广告位ID</label>
		    <div class="col-sm-10">
				<input type="text" class="form-control" id="pid" style="width:80%;display:inline-block;">
				<button type="button" class="btn btn-success getADInfo" style="display:inline-block;">自动填充广告位信息</button>
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword3" class="col-sm-2 control-label">宽</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" id="w">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword3" class="col-sm-2 control-label">高</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" id="h">
		    </div>
		  </div>
		  
		  <div class="form-group">
		    <label for="inputPassword3" class="col-sm-2 control-label">关键字1</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" id="k1">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword3" class="col-sm-2 control-label">关键字2</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" id="k2">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword3" class="col-sm-2 control-label">关键字3</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" id="k3">
		    </div>
		  </div>
		  
		  <div class="form-group">
		    <label for="inputPassword3" class="col-sm-2 control-label">分栏</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" id="max">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword3" class="col-sm-2 control-label">展示类型</label>
		    <div class="col-sm-10">
		    	<label class="radio-inline">
				  <input type="radio" name="showtype" id="showtype1" value="0"> 默认
				</label>
				<label class="radio-inline">
				  <input type="radio" name="showtype" id="showtype2" value="1"> 轮播图
				</label>
				<label class="radio-inline">
				  <input type="radio" name="showtype" id="showtype3" value="2"> Banner
				</label>
				<label class="radio-inline">
				  <input type="radio" name="showtype" id="showtype4" value="3"> 自定义模板
				</label>
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword3" class="col-sm-2 control-label">切换时间</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" id="time">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword3" class="col-sm-2 control-label">布局方式</label>
		    <div class="col-sm-10">
		    	<label class="radio-inline">
				  <input type="radio" name="arraytype" id="arraytype1" value="0"> 水平布局
				</label>
				<label class="radio-inline">
				  <input type="radio" name="arraytype" id="arraytype2" value="1"> 垂直布局
				</label>
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">模板代码</label>
		    <div class="col-sm-10">
				<textarea class="form-control" rows="3" id="code"></textarea>
		    </div>
		  </div>
		  
		  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">用户ID</label>
		    <div class="col-sm-10">
				<input type="text" class="form-control" id="user">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">用户IP</label>
		    <div class="col-sm-10">
				<input type="text" class="form-control" id="ip">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">默认物料</label>
		    <div class="col-sm-10">
				<input type="text" class="form-control" id="src" value="http://d189.mzhen.cn/static/trp/images/logo.jpg">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">默认跳转</label>
		    <div class="col-sm-10">
				<input type="text" class="form-control" id="ldp" value="http://www.gome.com.cn/">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">超时设置</label>
		    <div class="col-sm-10">
				<input type="text" class="form-control" id="timeout" value="1000">
		    </div>
		  </div>
		  <div class="form-group">
		    <div class="col-sm-offset-2 col-sm-10">
		      <button type="button" class="btn btn-primary viewByJS">JavaScript投放</button>
		      <button type="button" class="btn btn-primary viewByIframe">Iframe投放</button>
		    </div>
		  </div>
		</form>
		
      </div>
    </div> <!-- /container -->
    
    <div class="modal fade bs-example-modal-lg">
	  <div class="modal-dialog modal-lg">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title">投放结果展示</h4>
	      </div>
	      <div class="modal-body">
	        <p>One fine body&hellip;</p>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <!--<button type="button" class="btn btn-primary">Save changes</button>-->
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
	
    <script type="text/javascript">
	$(function(){
		/**/
		var editor = CodeMirror.fromTextArea(
		    document.getElementById("trpcode"),
		    { lineNumbers: true }
		);
		editor.setOption("theme", 'monokai');
		//(new Function(editor.doc.getValue()))();
		
		$('.viewFormCode').on('click', function(){
			var code = editor.doc.getValue();
			if(code.indexOf('<iframe')!=-1){
				$('.modal-title').html('Iframe投放结果展示如下');
			}else{
				$('.modal-title').html('JavaScript投放结果展示如下');
			}
			$('.modal-body').html(code);
			$('.modal.fade').modal('show');
		});
		
		/* 用户自定义投放 */
        $('.viewByJS').on('click', function(){
        	(function(doc){
			    //var t = parseInt((new Date()).getTime() / 1000);
			    var t = 1407744117;
			    var v = t - t % 300;
			    var js = doc.createElement("script"); 
				    js.charset = "utf-8";
			        //js.src = "http://d189.mzhen.cn/static/adserving/mz_ad_serving.js?v=" + v;
			        js.src = "semi_ad_serving.js?v=" + v;
			    var fs = doc.getElementsByTagName('script')[0]; 
				fs.parentNode.insertBefore(js, fs);
			})(document);
			
			var pid = $('#pid').val();
			var width = $('#w').val();
            var height = $('#h').val();
            
            var k1 = $('#k1').val();
            var k2 = $('#k2').val();
            var k3 = $('#k3').val();
            
            var max = $('#max').val();
            var showtype = $('[name=showtype]:checked').val();
            var time = $('#time').val();
            var arraytype = $('[name=arraytype]:checked').val();
            var code = $('#code').val();
            
            var user = $('#user').val();
            var ip = $('#ip').val();
            var src = $('#src').val();
            var ldp = $('#ldp').val();
            var timeout = $('#timeout').val();

            if (!width || !height || !pid) {
            	$('.modal-title').html('投放参数错误');
    			$('.modal-body').html('<div class="alert alert-danger" role="alert" style="text-align:center;">请至少填写：广告位ID、宽、高！</div>');
    			$('.modal.fade').modal('show');
                return;
            }
            
			$('.modal-title').html('JavaScript投放结果展示如下');
			$('.modal-body').html('<div id="GOME_1"></div>');
			$('.modal.fade').modal('show');
            
            (function (win) {
			    var params = {};
			    params["_srv"] = "GOME";
			    params["_id"] = "GOME_1";
			    
			    params["l"] = pid;
			    params["w"] = width;
			    params["h"] = height;
			    
			    params["k1"] = k1;
			    params["k2"] = k2;
			    params["k3"] = k3;
			    
			    params["max"] = max;
			    params["showtype"] = showtype;
			    params["time"] = time;
			    params["arraytype"] = arraytype;
			    params["code"] = encodeURIComponent(code);
			    
			    params["user"] = user;
			    params["ip"] = ip;
			    
			    params["src"] = src;
			    params["ldp"] = ldp;
			    params["timeout"] = timeout;
	
			    __semi_rpq = win.__semi_rpq || [];
			    __semi_rpq.push(params);
			})(window);
        });
        $('.viewByIframe').on('click', function(){
        	var pid = $('#pid').val();
			var width = $('#w').val();
            var height = $('#h').val();
            
            if (!width || !height || !pid) {
            	$('.modal-title').html('投放参数错误');
    			$('.modal-body').html('<div class="alert alert-danger" role="alert" style="text-align:center;">请至少填写：广告位ID、宽、高！</div>');
    			$('.modal.fade').modal('show');
                return;
            }
            
            var k1 = $('#k1').val();
            var k2 = $('#k2').val();
            var k3 = $('#k3').val();
            
            var max = $('#max').val();
            var showtype = $('[name=showtype]:checked').val();
            var time = $('#time').val();
            var arraytype = $('[name=arraytype]:checked').val();
            var code = $('#code').val();
            
            var user = $('#user').val();
            var ip = $('#ip').val();
            var src = $('#src').val();
            var ldp = $('#ldp').val();
            var timeout = $('#timeout').val();

			if (!width || !height || !pid) {
                return;
            }

            //var url = "http://d189.mzhen.cn/static/adserving/mzad_iframe.html?_srv=GOME&l=" + pid;
            var url = "semiad_iframe.html?_srv=GOME&l=" + pid;

            if (user)
                url += "&user=" + user;
            
            if (ip)
                url += "&ip=" + ip;
			
			url += "&k1=" + k1;
			url += "&k2=" + k2;
			url += "&k3=" + k3;
			
            url += "&src=" + src;
            url += "&ldp=" + ldp;
            url += "&w=" + width;
            url += "&h=" + height;
            url += "&timeout=" + timeout;
            url += "&max=" + max;
            url += "&showtype=" + showtype;
            url += "&time=" + time;
            url += "&arraytype=" + arraytype;
            url += "&code=" + encodeURIComponent(code);

            var newFrame = document.createElement("iframe");
            newFrame.setAttribute("width", width);
            newFrame.setAttribute("height", height);
            newFrame.setAttribute("frameborder", "0");
            newFrame.setAttribute("marginheight", "0");
            newFrame.setAttribute("marginwidth", "0");
            newFrame.setAttribute("scrolling", "no");
            newFrame.setAttribute("allowTransparency", "true");

            newFrame.setAttribute("src", url);

            $('.modal-title').html('Iframe投放结果展示如下');
			$('.modal-body').html(newFrame);
			$('.modal.fade').modal('show');
        });
        
        
        //获取广告位信息
        var getADInfo = function(){
        	var pid = $('#pid').val();
        	if(pid==''){
        		$('.modal-title').html('投放参数错误');
    			$('.modal-body').html('<div class="alert alert-danger" role="alert" style="text-align:center;">请至少填写：广告位ID！</div>');
    			$('.modal.fade').modal('show');
    			return;
        	}
        	$.ajax({
    			url: '/trp/position/get_position',
    			data: {
    				id: pid
    			},
    			success: function(data){
    				if(typeof data.message != 'undefined'){
    					var mess = '';
    					if(data.message == 'session expired'){
    						mess = '请先<a href="/" target="_blank">登录</a>系统！'
    					}else{
    						mess = data.message;
    					}
    					$('.modal-title').html('投放参数错误');
            			$('.modal-body').html('<div class="alert alert-danger" role="alert" style="text-align:center;">'+mess+'</div>');
            			$('.modal.fade').modal('show');
            			return;
    				}
    				
    				$('#pid').val(pid);
    				$('#w').val(data.width);
    	            $('#h').val(data.height);
    	            
    	            //$('#k1').val('');
    	            //$('#k2').val('');
    	            //$('#k3').val('');
    	            
    	            $('#max').val(data.max);
    	            $('[name=showtype][value='+data.showType+']').attr('checked','checked');
    	            $('#time').val(data.time);
    	            $('[name=arraytype][value='+data.arrayType+']').attr('checked','checked');
    	            $('#code').val(data.code);
    	            
    	            //$('#user').val();
    	            //$('#ip').val();
    	            //$('#src').val();
    	            //$('#ldp').val();
    	            //$('#timeout').val();
    				
    				console.log(data)
    				
    			},
    			error: function(){
    				$('.modal-title').html('投放参数错误');
        			$('.modal-body').html('<div class="alert alert-danger" role="alert" style="text-align:center;">获取广告位信息失败，请稍后重试！</div>');
        			$('.modal.fade').modal('show');
    			}
    		});
        }
        $('#pid').on('keyup', function(e){
        	if(e.keyCode=='13'){
        		getADInfo()
        	}
        });
        $('.getADInfo').on('click', getADInfo);
	});
    </script>
    </body>
</html>
